React Tutorial
Learn React
React is a JavaScript library for building user interfaces.
React is used to build single-page applications.
React allows us to create reusable UI components.
Start learning React now ❯Tip: Sign in to track your progress - it's free.
Learning by Examples
Our "Show React" tool makes it easy to demonstrate React. It shows both the code and the result.
Example:Get your own React.js Server
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
Learning by Exercises
Many chapters in this tutorial end with an exercise where you can check you level of knowledge.
Exercise?What is this?
Test your skills by answering a few questions about the topics of this page
What is a correct command to create a React application
React Quiz
Test your React skills with a quiz.
Track Your Progress
Create a free W3Schools account and get access to more features and learning materials:
View your completed tutorials, exercises, and quizzes- Keep an eye on your progress and daily streaks
- Set goals and create learning paths
- Create your own personal website
Note: This is an optional feature. You can study at W3Schools without creating an account.
Create React App
To learn and test React, you should set up a React Environment on your computer.
This tutorial uses the create-react-app.
The create-react-app tool is an officially supported way to create React applications.
Node.js is required to use create-react-app.
Open your terminal in the directory you would like to create your application.
Run this command to create a React application named
my-react-app:
npx create-react-app my-react-app
create-react-app will set up everything you need to run a React application.
Note:
If you've previously installed create-react-app globally,
it is recommended that you uninstall the package to ensure npx always uses the latest version of
create-react-app.
To uninstall, run this command: npm uninstall -g create-react-app.
Run the React Application
Run this command to move to the my-react-app directory:
cd my-react-app
Run this command to execute the React application
my-react-app:
npm start
A new browser window will pop up with your newly created React App! If not, open your browser and type
localhost:3000 in the address bar.
The result:
You will learn more about the create-react-app in the React Get Started chapter.
What You Should Already Know
Before you continue you should have a basic understanding of the following:
If you want to study these subjects first, find the tutorials on our Home page.
In addition, you should also have some experience with the new JavaScript features introduced in ECMAScript 6 (ES6), you will learn about them in the React ES6 chapter.
